<template>
    <div class="merchant">
        <van-nav-bar
            title="商户信息"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        >
        <template #right>
          <van-dropdown-menu class="dropdown" active-color="#1989fa">
            <van-dropdown-item v-model="value" :options="option1" />
          </van-dropdown-menu>
        </template>
        </van-nav-bar>
        <div class="main-body" ref="mainBox">
          <div class="ship-box box-style" v-for="item,index in merchantInfo" :key="index">
            <div class="name flex-x-start">
              <span class="name-box">{{ item.name }}<span :class="['status',item.status == '1' ? 'green' : 'red' ]">（{{statusEnum(Number(item.status))}}）</span></span>
              <van-image
                width="10rem"
                height="10rem"
                fit="contain"
                :src="'http://cnnn.bsmkj.cn'+item.ewmimage"
              />
            </div>
            <div class="address">商家类别</div>
            <div class="text-left pl-10 pr-10 font-size13"><van-icon name="star" color="#dd4444" class="mr-5"/>{{ item.business.category }}</div>
            <div class="address">商家地址</div>
            <div class="text-left pl-10 pr-10 font-size13"><van-icon name="location" color="#dd4444" class="mr-5"/>{{ item.region }}</div>
            <div class="address">联系信息</div>
            <div class="text-left pl-10 pr-10 font-size13 mb-5">
              <van-icon name="contact" color="#dd4444" class="mr-5"/>{{item.contacts}}
              <van-icon name="phone" color="#dd4444" class="mr-5 ml-15"/>{{item.phone}}
            </div>
          </div>
          <div class="title" v-if="(merchantInfo.length < total) && (loading == true)">加载中,请稍后...</div>
          <div class="title" v-else>没有数据啦</div>
        </div>
    </div>

</template>
<script>
import Enums from "@/utils/enums.js";
export default {
  data() {
    return {
        merchantInfo:[{
          business:{category:"火锅"},
          contacts:'行秋',
          name:'202酒吧',
          region:'成都市青羊区壹方里',
          ewmimage: "/qrcode/freight/lanes/merchantId=8}.png?v=1698890739",
          phone: "19130814336",
          status: "1",
          stop_time: "2023-11-01 16:38:10"
        },{
          business:{category:"香烟"},
          contacts:'班尼特',
          name:'202酒吧',
          region:'成都市青羊区壹方里',
          ewmimage: "/qrcode/freight/lanes/merchantId=8}.png?v=1698890739",
          phone: "19130814336",
          status: "2",
          stop_time: "2023-11-01 16:38:10"
        },{
          business:{category:"名酒"},
          contacts:'香菱',
          name:'202酒吧',
          region:'成都市青羊区壹方里',
          ewmimage: "/qrcode/freight/lanes/merchantId=8}.png?v=1698890739",
          phone: "19130814336",
          status: "1",
          stop_time: "2023-11-01 16:38:10"
        }],
        value:0,
        option1: [],
        page: 1, // 当前页数
        total:50,
        limit:5,
        loading:false
    };
  },
  mounted() {
    this.$refs.mainBox.addEventListener('scroll',this.scroll,true)
    this.option1 = Enums.stutasEnum1.list
  },
  methods:{
    scroll() {
      const scrollTop = this.$refs.mainBox.scrollTop
      const windowHeight = this.$refs.mainBox.clientHeight
      const scrollHeight = this.$refs.mainBox.scrollHeight
      if (scrollTop + windowHeight >= scrollHeight ) {
          if(this.merchantInfo.length >= this.total){
              this.loading = false
              console.log('没有数据啦')
          }else{
              this.loading = true
              this.page += 1
              console.log(this.page,'加载中')
              // 调用请求
          }
      }
    },
    onClickLeft() {
        this.$router.back()
    },
  }
}
</script>
<style scoped lang="scss">
.merchant{
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
}
.main-body{
  width: 100%;
  height: calc(100% - 46px);
  overflow-y: auto;
  .ship-box{
    width: 95%;
    height: 250px;
    margin: 20px auto 25px auto;
    // background-color: palegreen;
    .name{
      height: 60px;
      width: 100%;
      position: relative;
      border-radius: 15px 15px 0 0;
      border-bottom: 1px solid #ececec;
      .name-box{
        line-height: 60px;
        display: inline-block;
        text-align: left;
        padding-left: 10px;
        font-size: 22px;
        font-weight: bold;
        font-family: "楷体", "宋体",serif;
        width: calc(100% - 80px);
      }
    }
    .van-image{
      width: 60px !important;
      height: 60px !important;
      position: absolute;
      top: -10px;
      right: 10px;
    }
    .address{
      margin: 15px 0 6px 0;
      width: calc(100% - 10px);
      padding-left: 10px;
      text-align: left !important;
      font-weight: bold;
    }
    .status{
      font-size: 14px;
    }
    .green{
      color: #2cb996;
    }
    .red{
      color: #f7aa62;
    }
  }
}
</style>
<style>
.dropdown{
  width: 70px;
}
.dropdown .van-dropdown-menu__bar{
  background-color: transparent !important;
  box-shadow: none !important;
}
.dropdown .van-ellipsis{
  font-size: 14px;
}
</style>